<div class="wrap">

		<div id="icon-themes" class="icon32"></div>

		<h2>Kodax - Homepage Settings</h2>

		<?php 
			//delete_option('canon_options_hp');
			$canon_options_hp = get_option('canon_options_hp'); 

			// detect if page-homepage.php is used as front
			$use_theme_homepage = "false";
			if (get_option('show_on_front') == "page") {
					$page_template_id = get_option('page_on_front');
					$page_template_name = get_post_meta($page_template_id,'_wp_page_template',true);
					if ($page_template_name == "page-homepage.php") $use_theme_homepage = "true";
			}

			// var_dump($canon_options_hp["features"]);
		?>

		<br>
		
		<div class="options_wrapper canon-options canon_options_homepage" data-use_theme_homepage="<?php echo $use_theme_homepage; ?>">
		
			<div class="table_container">

				<form method="post" action="options.php" enctype="multipart/form-data">
					<?php settings_fields('group_canon_options_hp'); ?>				<!-- very important to add these two functions as they mediate what wordpress generates automatically from the functions.php -->
					<?php do_settings_sections('handle_canon_options_hp'); ?>		

					<?php submit_button(); ?>
					
					<div class="options_container_default_blog">

						<!-- 
						--------------------------------------------------------------------------
							DEFAULT BLOG HOMEPAGE
					    -------------------------------------------------------------------------- 
						-->

							<?php 

								fw_option_help(array(
									'type'					=> 'ol',
									'title' 				=> __('To set up the theme specific homepage', 'loc_canon'),
									'content' 				=> array(
										__('Go to Pages > Add New.', 'loc_canon'),
										__('Give your homepage page a title e.g. "Homepage".', 'loc_canon'),
										__('In the Page Attributes box > Template > Select Homepage.', 'loc_canon'),
										__('Publish.', 'loc_canon'),
									),
								)); 

								fw_option_help(array(
									'type'					=> 'ol',
									'title' 				=> __('Now tell WordPress to use the theme specific homepage as front page', 'loc_canon'),
									'content' 				=> array(
										__('Go to Wordpress Settings > Reading > Front page displays.', 'loc_canon'),
										__('Choose: "A static page"', 'loc_canon'),
										__('Select: Frontpage: "Homepage".', 'loc_canon'),
										__('Save changes', 'loc_canon'),
										__('Theme specific homepage options will now be available in this section.', 'loc_canon'),
									),
								)); 

							?>

					</div>


					<div class="options_container_theme_homepage">

						<!-- 
						--------------------------------------------------------------------------
							HP: FEATURES
					    -------------------------------------------------------------------------- 
						-->

							<h3><?php _e("Features", "loc_canon"); ?> <img src="<?php echo get_template_directory_uri() . '/img/help.png' ?>"></h3>

							<div class='help'>
								<?php 

									fw_option_help(array(
										'type'					=> 'ul',
										'title' 				=> __('Features', 'loc_canon'),
										'content' 				=> array(
											__('Features are displayed on your homepage below the slider.', 'loc_canon'),
											__('Each feature has an icon, a title and a text.', 'loc_canon'),
											__('You can display as many rows of features as you would like and in each row you can display between 1 and 5 features.', 'loc_canon'),
											__('Click the "Add feature row" to add a new feature row at the bottom.', 'loc_canon'),
											__('Click the "Remove feature row" to remove the last feature row.', 'loc_canon'),
										),
									)); 

									fw_option_help(array(
										'type'					=> 'standard',
										'title' 				=> __('Feature icon', 'loc_canon'),
										'content' 				=> array(
											__('You can select to use one of the Font Awesome icons as your featured icon or you can upload a custom icon.', 'loc_canon'),
											__('Just leave the custom icon input empty if you want to use a Font Awesome icon.', 'loc_canon'),
											__('You can see a full list of the Font Awesome icons <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">here</a>.', 'loc_canon'),
										),
									)); 

								 ?>		

							</div>

							<table id='hp_features' class='form-table'>

								<tr valign='top'>
									<th scope='row'><?php _e("Show features", "loc_canon"); ?></th>
									<td colspan="4">
										<input type="hidden" name="canon_options_hp[show_features]" value="unchecked" />
										<input class="checkbox" type="checkbox" id="show_features" name="canon_options_hp[show_features]" value="checked" <?php if (isset($canon_options_hp['show_features'])) { checked($canon_options_hp['show_features'] == "checked"); } ?>/> 
										<br><br>
									</td>
									<td>
									</td>
								</tr>

								<?php 

									$font_awesome_array = mb_get_font_awesome_icon_names_in_array();

									for ($n = 0; $n < count($canon_options_hp['features']); $n++) { 
									?>
										<tr valign='top' class="hp_features_row">

											<?php 

												for ($i = 0; $i < 5; $i++) {  
												?>

													<td>
														<input type="hidden" class="hp_features_show_hidden" name="canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][show]" value="unchecked" />
														<input class="checkbox hp_features_show" type="checkbox" id="show" name="canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][show]" value="checked" <?php if (isset($canon_options_hp['features'][$n][$i]['show'])) { checked($canon_options_hp['features'][$n][$i]['show'] == "checked"); } ?>/> <?php _e("Show", "loc_canon"); ?>
														<br><br>

														Font Awesome icon
														<select class="font_awesome_select" name="canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][font_awesome_icon]"> 
															<?php 

																for ($m = 0; $m < count($font_awesome_array); $m++) {  
																?>
											     					<option value="<?php echo $font_awesome_array[$m]; ?>" <?php if (isset($canon_options_hp['features'][$n][$i]['font_awesome_icon'])) {if ($canon_options_hp['features'][$n][$i]['font_awesome_icon'] == $font_awesome_array[$m]) echo "selected='selected'";} ?>><?php echo $font_awesome_array[$m]; ?></option> 
																<?php
																}

															?>
														</select> 

														<i class="fawesome fa <?php if (isset($canon_options_hp['features'][$n][$i]['font_awesome_icon'])) { echo $canon_options_hp['features'][$n][$i]['font_awesome_icon']; } else { echo "fa fa-flag"; } ?>"></i>
														<br><br>

														<label>Or use custom icon instead</label><br>
														<input type='text' id='icon_url' name='canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][icon_url]' class='features url hp_features_icon_url' value='<?php if (isset($canon_options_hp['features'][$n][$i]['icon_url'])) echo $canon_options_hp['features'][$n][$i]['icon_url']; ?>'>
														<input type="button" id="upload_icon_img" class="features upload button upload_button" value="Upload image" />
														<br><br>

														<label>Title</label><br/> 
														<input type='text' class='features hp_features_title' name='canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][title]' value="<?php if (isset($canon_options_hp['features'][$n][$i]['title'])) echo htmlspecialchars($canon_options_hp['features'][$n][$i]['title']); ?>">
														<br><br>

														<label>Text</label><br>
														<textarea class="hp_features_text" name='canon_options_hp[features][<?php echo $n; ?>][<?php echo $i; ?>][text]' rows='5' cols='100'><?php if (isset($canon_options_hp['features'][$n][$i]['text'])) echo $canon_options_hp['features'][$n][$i]['text']; ?></textarea>

													</td>
													
												<?php
												}

											?>

										</tr>
									 	
									 <?php 
									}

								?>



							</table>


							<table id='statistics_control' class='form-table'>
								<tr valign='top'>
									<th scope='row'></th>
									<td>
										<input type="button" id="button_add_feature_row" class="button" value="Add feature row" />
										<input type="button" id="button_remove_feature_row" class="button" value="Remove feature row" />
									</td>
								</tr>

							</table>

						<!-- 
						--------------------------------------------------------------------------
							HP: QUOTES SLIDER
					    -------------------------------------------------------------------------- 
						-->

							<h3><?php _e("Quotes", "loc_canon"); ?> <img src="<?php echo get_template_directory_uri() . '/img/help.png' ?>"></h3>

							<div class='help'>
								<?php 

									fw_option_help(array(
										'type'					=> 'standard',
										'title' 				=> __('Quotes Style', 'loc_canon'),
										'content' 				=> array(
											__('Choose between: Automatic Twitter feed or Manual quotes setup.', 'loc_canon'),
										),
									)); 

									fw_option_help(array(
										'type'					=> 'standard',
										'title' 				=> __('Automatic twitter feed', 'loc_canon'),
										'content' 				=> array(
											__('Insert your Twitter Widget code (click the link to generate a code if you do not have one). Choose how many tweets to display in the quotes slider.', 'loc_canon'),
										),
									)); 

									fw_option_help(array(
										'type'					=> 'standard',
										'title' 				=> __('Manual quotes setup', 'loc_canon'),
										'content' 				=> array(
											__('Fill out quotes and byline. Add or remove quotes using the buttons at the bottom of the quotes section.', 'loc_canon'),
											__('You can choose to have your manual quotes styled like tweets.', 'loc_canon'),
										),
									)); 

								 ?>		

							</div>

							<table id='hp_quotes' class='form-table'>

								<tr valign='top'>
									<th scope='row'><?php _e("Display quotes", "loc_canon"); ?></th>
									<td>
										<input type="hidden" name="canon_options_hp[use_hp_quotes]" value="unchecked" />
										<input class="checkbox" type="checkbox" id="use_hp_quotes" name="canon_options_hp[use_hp_quotes]" value="checked" <?php if (isset($canon_options_hp['use_hp_quotes'])) { checked($canon_options_hp['use_hp_quotes'] == "checked"); } ?>/> 
									</td>
								</tr>

								<tr valign='top'>
									<th scope='row'><?php _e("Quotes Style", "loc_canon"); ?></th>
									<td>
										<select id="hp_quotes_style" name="canon_options_hp[hp_quotes_style]" class="option_parent" data-option_current_value="<?php echo $canon_options_hp['hp_quotes_style']; ?>"> 
							     			<option value="tweets" <?php if (isset($canon_options_hp['hp_quotes_style'])) {if ($canon_options_hp['hp_quotes_style'] == "tweets") echo "selected='selected'";} ?>><?php _e("Automatic Twitter feed", "loc_canon"); ?></option> 
							     			<option value="manual" <?php if (isset($canon_options_hp['hp_quotes_style'])) {if ($canon_options_hp['hp_quotes_style'] == "manual") echo "selected='selected'";} ?>><?php _e("Manual quotes setup", "loc_canon"); ?></option> 
										</select> 
									</td>
								</tr>

								<tr valign='top' class="option_child" data-option_parent="hp_quotes_style" data-option_value="tweets">
									<th scope='row'><?php _e("Twitter Widget code", "loc_canon"); ?></th>
									<td>
										<textarea id='hp_twitter_widget_code' name='canon_options_hp[hp_twitter_widget_code]' rows='5' cols='100'><?php if (isset($canon_options_hp['hp_twitter_widget_code'])) echo $canon_options_hp['hp_twitter_widget_code']; ?></textarea>
										<?php _e("Generate you own widget code here", "loc_canon"); ?>: <a href='https://twitter.com/settings/widgets' target='_blank'>https://twitter.com/settings/widgets/</a>
									</td>
								</tr>

								<tr valign='top' class="option_child" data-option_parent="hp_quotes_style" data-option_value="tweets">
									<th scope='row'><?php _e("Number of tweets to display", "loc_canon"); ?></th>
									<td>
										<input 
											type='number' 
											id='hp_num_tweets' 
											name='canon_options_hp[hp_num_tweets]' 
											min='1'
											max='10'
											style='width: 60px;'
											value='<?php if (isset($canon_options_hp['hp_num_tweets'])) echo esc_attr($canon_options_hp['hp_num_tweets']); ?>'
										> <i>(<?php _e("pixels", "loc_canon"); ?>)</i>
									</td> 
								</tr>

								<tr valign='top' class="option_child" data-option_parent="hp_quotes_style" data-option_value="manual">
									<th scope='row'><?php _e("Display manual quotes as tweets", "loc_canon"); ?></th>
									<td>
										<input type="hidden" name="canon_options_hp[manual_quotes_as_tweets]" value="unchecked" />
										<input class="checkbox" type="checkbox" id="manual_quotes_as_tweets" name="canon_options_hp[manual_quotes_as_tweets]" value="checked" <?php if (isset($canon_options_hp['manual_quotes_as_tweets'])) { checked($canon_options_hp['manual_quotes_as_tweets'] == "checked"); } ?>/> 
									</td>
								</tr>

								<?php 
								if (isset($canon_options_hp['hp_quotes'])) {
									
									for ($i = 0; $i < count($canon_options_hp['hp_quotes']); $i++) {  
									?>

									<tr valign='top' class='hp_quotes_row option_child' data-option_parent="hp_quotes_style" data-option_value="manual">
										<th scope='row'>Quote <?php echo $i+1; ?></th>
										<td>
										Quote<br> <input class='widefat' type='text' id='hp_quotes_quote' name='canon_options_hp[hp_quotes][<?php echo $i; ?>][0]' value="<?php if (isset($canon_options_hp['hp_quotes'][$i][0])) echo htmlspecialchars($canon_options_hp['hp_quotes'][$i][0]); ?>">
										<br>
										by<br> <input class='widefat' type='text' id='hp_quotes_by' name='canon_options_hp[hp_quotes][<?php echo $i; ?>][1]' value="<?php if (isset($canon_options_hp['hp_quotes'][$i][1])) echo htmlspecialchars($canon_options_hp['hp_quotes'][$i][1]); ?>">
										</td>
									</tr>

									<?php
									}

								}

								?>

							</table>

							<table id='quotes_control' class='form-table'>
								<tr valign='top' class="option_child" data-option_parent="hp_quotes_style" data-option_value="manual">
									<th scope='row'></th>
									<td>
										<input type="button" id="button_add_quote" class="button" value="Add quote" />
										<input type="button" id="button_remove_quote" class="button" value="Remove quote" />
									</td>
								</tr>

							</table>

					</div>



					<?php submit_button(); ?>

				</form>
			</div> <!-- end table container -->	

	
		</div>

	</div>

